<template>
  <div class="content">
    <div class="header flex justify-around">
      <div class="logo flex justify-around">
          <el-image style="width: 80%;" :src="logo" fit="contain" />
      </div>
      <div class="menu">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="#EB3C03"
          router
          @click="clickMenu"
        >
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
          <el-menu-item index="/main">主营业务</el-menu-item>
          <el-menu-item index="/resource">资源展示</el-menu-item>
          <el-menu-item index="/infomation">联系我们</el-menu-item>
        </el-menu>
      </div>
      <div class="phone flex">
        <div>
          <el-icon class="icon"><PhoneFilled /></el-icon>
        </div>
        <div>18999999999</div>
      </div>
    </div>
    <div class="page">
      <router-view></router-view>
    </div>
    <!-- 底部 -->
    <div class="footer  justify-between">
            <div class="foo_left">
                <div class="foo_l_top flex">
                    <div class="foo_item">
                        <div class="item_title">专享服务</div>
                        <div class="item_content">
                            <div class="item">商超零售</div>
                            <div class="item">物业租赁（店面/写字楼/厂房）</div>
                            <div class="item">车辆与设备（工程车+运输车租售）</div>
                            <div class="item">运输服务（车队与物流）</div>
                        </div>
                    </div>
                    <div class="foo_item">
                        <div class="item_title">24H服务专线</div>
                        <div class="item"><el-icon class="icon"><PhoneFilled /></el-icon>商超专线 189 6666 8888</div>
                        <div class="item"><el-icon class="icon"><PhoneFilled /></el-icon>商超专线 189 6666 8888</div>
                        <div class="item"><el-icon class="icon"><PhoneFilled /></el-icon>商超专线 189 6666 8888</div>
                        <div class="item"><el-icon class="icon"><PhoneFilled /></el-icon>商超专线 189 6666 8888</div>
                    </div>
                </div>
                <div class="foo_l_bottom">备案号 京公网安备11000002000001号 京ICP证030173号 互联网新闻信息服务许可证11220180008</div>
            </div>
            <div class="foo_right">
                <div class="right_title">扫码联系我们</div>
                <div class="qrcode flex">
                    <div class="item">
                        <el-image src="../src/assets/images/home/Rectangle@2x.jpg"></el-image>
                        <div class="text">咨询客服</div>
                    </div>
                    <div class="item">
                        <el-image src="../src/assets/images/home/Rectangle@2x.jpg"></el-image>
                        <div class="text">公众号（关注我）</div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const logo = ref("../src/assets/images/home/logo@2x.png");
let activeMenu = ref("/home");

const handleSelect = () => {};

const clickMenu = () => {
  
};

</script>
<style lang="less" scoped>
@import "@/assets/css/common.css";
@import "@/assets/css/reset.css";
.content {
}
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  .logo {
    width: 15%;
    text-align: center;
  }

  .menu {
    width: 76%;
    font-weight: 600;
  }
  .phone {
    font-size: 14px;
    width: 10%;
    text-align: center;
    color: #eb3c03;

    .icon {
      transform: translate(0px, 2px);
      margin-right: 4px;
    }
  }
}
.el-menu--horizontal.el-menu {
  border-bottom: none;
  height: 100%;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background: none;
  color: #eb3c03;
}
// 底部
.footer{
    padding: 50px 120px;
    color: #999999;
    background: #333333;
    .foo_left{
        .foo_l_top{
            margin-bottom: 20px;
            .foo_item{
                margin-right: 20px;
                font-size: 13px;
                .item_title{
                    font-weight: 600;
                    height: 28px;
                    line-height: 28px;
                }
                .item{
                    height: 24px;
                    line-height: 24px;
                    .icon{
                        transform: translate(-2px,2px);
                    }
                }
                .item:before{
                    background: #999999;
                    width: 2px;
                    height: 2px;
                }
                
            }
        }
        .foo_l_bottom{
            
            font-size: 13px;
        }
    }
    .foo_right{
        .right_title{
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            font-weight: 600;
        }
        .qrcode{
            .item{
                border-radius: 4px;
                width: 110px;
                padding: 6px;
                background: #FFFFFF;
                margin-right: 10px;
                .text{
                    color: #666666;
                    text-align: center;
                    font-size: 13px;
                }
            }
        }
    }
}
</style>